<template>
  <div class="container">
    <div class="content-box">
      <div class="form-box">
        <van-cell-group>
          <van-field @blur="out" v-model="listQuery.proposal_title" maxlength="50" placeholder="请输入标题"/>
        </van-cell-group>
      </div>
      <div class="image-upload">
        <div class="img-box">
          <div class="upload-img">
            <img
              v-if="listQuery.file_path"
              class="img-data"
              :src="listQuery.file_path"
              alt
              width="100%"
            >
            <p v-if="!listQuery.file_path" class="img-text">上传封面</p>
            <tailor2 @setImg="setImg"></tailor2>
          </div>
        </div>
      </div>
      <editor-view v-if="flag" ref="editor" :content="listQuery.actuality_description"></editor-view>
      <div class="programme-box">
        <editor2-view v-if="flag" ref="editor2" :content2="listQuery.improvement_scheme"></editor2-view>
      </div>
      <div class="programme-box">
        <van-cell-group>
          <van-field
            @blur="out"
            v-model="listQuery.benefit_calculation"
            type="textarea"
            placeholder="请输入效益计算"
            rows="4"
            autosize
          />
        </van-cell-group>
      </div>
    </div>
    <div class="submit-box">
      <van-button size="large" type="danger" @click="onSubmit">提交数据</van-button>
    </div>
  </div>
</template>

<script>
import { proposal_save, proposal_edit } from "@/api/proposal";
import wangeditor from "@/components/wangeditor";
import tailor2 from "@/components/public/tailor/tailorImg2";
import wangeditor2 from "@/components/wangeditor2";
import TitleItem from "../../components/public/title/title";
import other from "@/utils/other";
 import { Debounce, Throttle } from "@/utils";

export default {
  name: "proposal",
  components: {
    "editor-view": wangeditor,
    "editor2-view": wangeditor2,
    TitleItem,
    tailor2
  },
  data() {
    return {
      flag:true,
      listQuery: {
        proposal_title: "",
        file_path:
          "https://gw.alicdn.com/tfs/TB1WNaQP3HqK1RjSZFEXXcGMXXa-916-516.png",
        optimization_suggestion: "",
        actuality_description: "",
        improvement_scheme: "",
        benefit_calculation: "",
        company_id: localStorage.getItem("companyId"),
        moule_id: 1
      }
    };
  },
  methods: {
    out() {
      other.inputBlur();
    },
    setImg(data) {
      this.listQuery.file_path = data;
    },
    beforeRead(file) {
      let param = new FormData(); //创建form对象
      param.append("file_path", file); //通过append向form对象添加数据
      let config = {
        headers: { "Content-Type": "multipart/form-data" }
      };
      // this.img_path = file.name;
      this.saveImg(param, config);
    },
    saveImg(param, config) {
      this.$http
        .post("/login/reception/htmlfileUpload", param, config)
        .then(res => {
          if (res.data.status == 100) {
            this.listQuery.file_path = res.data.data.file_path;
          }
        });
    },
    onSubmit:Throttle(function() {
      this.flag = true;
      this.saveObj();
    },1000),
    async saveObj() {
      this.listQuery.actuality_description = this.$refs.editor.getContent(); //富文本内容
      this.listQuery.improvement_scheme = this.$refs.editor2.getContent2(); //富文本内容
      if (!this.listQuery.proposal_title) {
        this.$toast("标题不能为空");
        return;
      }
      if (!this.listQuery.file_path) {
        this.$toast("封面图片不能为空");
        return;
      }
      if (!this.listQuery.actuality_description) {
        this.$toast("现状描述不能为空");
        return;
      }
      if (!this.listQuery.improvement_scheme.length) {
        this.$toast("改进方案不能为空");
        return;
      }
      //   if (!this.listQuery.benefit_calculation) {
      //     this.$toast("效益计算不能为空");
      //     return;
      //   }
      let query = Object.assign(this.listQuery);
      let res =
        this.$route.query.name == "edit"
          ? await proposal_edit(query)
          : await proposal_save(query);
      let result = res.data;
      if (result.status == 100) {
        this.$route.query.name == "edit"
          ? this.$toast.success("修改数据成功")
          : this.$toast.success("新增数据成功");
        setTimeout(() => {
          this.$router.push({
            path: "/proposalDetail",
            query: {
              id: result.data.id,
              name: "proposal"
            }
          });
          // this.$router.replace("/proposalHome");
        }, 1000);
      }
    }
  },
  created() {
    if (this.$route.query.name) {
      this.listQuery = this.$route.query.content;
      this.$nextTick(_ => {
        this.$refs.editor.setContent();
        this.$refs.editor2.setContent2();
      });
    }
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
@import "proposal";
</style>
